class ToyarMomo {
	constructor(size, {
		mainColor = '#cbe8d7',
		secondColor = '#02feff',
	}) {
		this.size = size
		this.mainColor = mainColor
		this.secondColor = secondColor
		this.init()
	}
	init() {
		this.appendStyles()
		this.createMomo()
		this.startEyeFollow()
	}
	createLeftEar() {
		const leftEar = document.createElement('div')
		leftEar.className = 'Momo-left_Ear ear-light'
		this.leftEar = leftEar
		return leftEar
	}
	createRightEar() {
		const rightEar = document.createElement('div')
		rightEar.className = 'Momo-right_Ear ear-light'
		this.rightEar = rightEar
		return rightEar
	}
	createLeftEye() {
		const leftEye = document.createElement('div');
		leftEye.className = 'Momo-left_Eye'
		this.leftEye = leftEye
		return leftEye
	}
	createRightEye() {
		const rightEye = document.createElement('div');
		rightEye.className = 'Momo-right_Eye'
		this.rightEye = rightEye
		return rightEye
	}
	createInner() {
		const inner = document.createElement('div');
		inner.className = 'inner'
		this.inner = inner
		const leftEye = this.createLeftEye()
		const rightEye = this.createRightEye()
		inner.append(leftEye)
		inner.append(rightEye)
		return inner
	}
	createBody() {
		const body = document.createElement('div');
		body.className = 'MomoBody'
		this.body = body
		const inner = this.createInner()
		body.append(inner)
		return body
	}
	createMomo() {
		let main = document.createElement('main');
		main.id = 'Momo'
		main.className = 'ToyarMomo'
		main.style.setProperty('--size', this.size + 'px')
		main.style.setProperty('--mainColor', this.mainColor)
		main.style.setProperty('--secondColor', this.secondColor)

		this.main = main
		const body = this.createBody()
		const leftEar = this.createLeftEar()
		const rightEar = this.createRightEar()
		main.append(body)
		main.append(leftEar)
		main.append(rightEar)

		const open = document.createElement('div')
		open.className = 'open'
		main.append(open)


		const leftVg = document.createElement('div')
		leftVg.className = 'leftVg'
		main.append(leftVg)

		const rightVg = document.createElement('div')
		rightVg.className = 'rightVg'
		main.append(rightVg)

		const dialog = document.createElement('div')
		dialog.className = 'dialog'
		this.dialog = dialog
		main.append(dialog)

		document.body.append(main)
		this.loading()
	}

	appendStyles() {
		let staticStyle = `
        `
		let style = document.createElement('style')
		style.innerText = staticStyle
		document.body.appendChild(style)
	}
	loading() {
		const loading = document.createElement('div')
		loading.className = 'loading'
		loading.innerText = 'Loading...'
		this.inner.innerHTML = ''
		this.inner.append(loading)
		let left = 0
		this.main.classList.add('ball')
		let timer = setInterval(() => {
			left -= 5
			if (left <= -this.size * 2 / 3) {
				left = this.size * 2 / 3
			}
			loading.style.left = left + 'px'
		}, 100)
		setTimeout(() => {
			clearInterval(timer)
			this.main.classList.remove('ball')
			this.say('主人,我回来咯!')
			this.open()
		}, 3000)
	}
	open() {
		this.inner.innerHTML = ''
		this.inner.append(this.leftEye)
		this.inner.append(this.rightEye)
		this.startStatus()
	}
	mouseMove(e) {
		const multiple = 80;
		const transformElement = (x, y) => {
			let box = this.rightEye.getBoundingClientRect();
			let calcX = (y - box.y - (box.height / 2)) / multiple;
			let calcY = (x - box.x - (box.width / 2)) / multiple;
			this.rightEye.style.transform =
				`translate(${calcY}px, ${calcX}px)`
			this.leftEye.style.transform =
				`translate(${calcY}px, ${calcX}px)`
		}
		window.requestAnimationFrame(function() {
			transformElement(e.clientX, e.clientY);
		});
	}
	startEyeFollow() {
		document.getElementsByTagName("body")[0].addEventListener('mousemove', (e) => {
			this.mouseMove(e)
		});
	}
	startStatus() {
		setInterval(() => {
			let data = Math.random()
			if (data > 0 && data < 0.4) {
				this.blink()
			}
			if (data > 0.1 && data < 0.6) {
				this.rotateEar()
			}
			if (data > 0.6) {
				let info = "啦啦啦啦啦啦啦啦啦~"
				if (data > 0.7) {
					function pad(timeEl, total = 2, str = '0') {
						return timeEl.toString().padStart(total, str)
					}

					function formaData(timer) {
						const year = timer.getFullYear()
						const month = timer.getMonth() + 1 // 由于月份从0开始，因此需加1
						const day = timer.getDate()
						const hour = timer.getHours()
						const minute = timer.getMinutes()
						const second = timer.getSeconds()
						return `${pad(year, 4)}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`
					}
					console.log(formaData(new Date()));
					info = formaData(new Date())
				}
				this.say(info)
			}
		}, 1000)
	}
	say(info) {
		this.dialog.innerText = info
		setTimeout(() => {
			this.dialog.innerHTML = ''
		}, 1000)
	}
	blink() {
		this.leftEye.classList.toggle('momo-blink')
		this.rightEye.classList.toggle('momo-blink')
	}
	rotateEar() {
		this.leftEar.classList.toggle('momo-leftRotate')
		this.rightEar.classList.toggle('momo-rightRotate')
	}
	error() {
		if (this.main.style.getPropertyValue('--secondColor') === 'red') {
			return this.main.style.setProperty('--secondColor', this.secondColor)
		}
		this.main.style.setProperty('--secondColor', 'red')
	}
}
let momo = new ToyarMomo(150, {
	// mainColor:'#cbe8d7',
	// secondColor:'#02feff',
	// mainColor:'red',
	// secondColor:'blue'
})